<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
    <script th:src="@{/layui/layui.js}"></script>
</head>
<style>
    ::-webkit-scrollbar {display:none}/*隐藏横向滚动条但可以滚动*/
</style>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item" style="margin-top: 20px">
        <label class="layui-form-label">员工姓名</label>
        <div class="layui-input-inline">
            <input type="hidden" name="emp_id" th:value="${emp.emp_id}">
            <input type="hidden" name="status" th:value="${emp.status}">
            <input th:value="${emp.emp_name}"  name="emp_name" required lay-verify="required" placeholder="员工姓名" autocomplete="off" class="layui-input">
        </div>

        <label class="layui-form-label">籍贯</label>
        <div class="layui-input-inline">
            <input th:value="${emp.nation}" name="nation" required lay-verify="required" placeholder="籍贯" class="layui-input">
        </div>

        <label class="layui-form-label">
            <i class="layui-icon">&#xe662;</i>
            <i class="layui-icon">&#xe661;</i>性别</label>
        <div class="layui-input-inline" style="padding-left: 20px">
            <input type="radio" th:checked="${emp.emp_sex == '男'}" name="emp_sex" value="男" title="男">
            <input type="radio" th:checked="${emp.emp_sex == '女'}" name="emp_sex" value="女" title="女">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">生日</label>
        <div class="layui-input-inline">
            <input th:value="${emp.birthday}" class="layui-input" lay-verify="required" autocomplete="off" id="birthday" name="birthday" type="text" placeholder="yyyy-MM-dd">
        </div>

        <label class="layui-form-label">专业</label>
        <div class="layui-input-inline">
            <input th:value="${emp.major}" name="major" placeholder="专业" lay-verify="required" class="layui-input">
        </div>

        <label class="layui-form-label">入职日期</label>
        <div class="layui-input-inline">
            <input th:value="${emp.hireday}" class="layui-input" lay-verify="required" autocomplete="off" id="hireday" name="hireday" type="text" placeholder="yyyy-MM-dd">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">邮箱地址</label>
        <div class="layui-input-inline">
            <input th:value="${emp.email}" autocomplete="off" name="email" lay-verify="email" placeholder="邮箱地址" class="layui-input">
        </div>

        <label class="layui-form-label">支付宝</label>
        <div class="layui-input-inline">
            <input th:value="${emp.alipay}" autocomplete="off" name="alipay" placeholder="支付宝" class="layui-input">
        </div>

        <label class="layui-form-label"><i class="layui-icon">&#xe677;</i> 微信</label>
        <div class="layui-input-inline">
            <input th:value="${emp.weixin}" name="weixin" autocomplete="off" placeholder="微信号码" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><i class="layui-icon">&#xe705;</i> 学历</label>
        <div class="layui-input-inline">
            <select name="education" lay-verify="required">
                <option value="">请选择学历</option>
                <option th:selected="${emp.education == '本科'}" value="本科">本科</option>
                <option th:selected="${emp.education == '专科'}" value="专科">专科</option>
            </select>
        </div>

        <label class="layui-form-label">婚姻状况</label>
        <div class="layui-input-inline">
            <select name="married" lay-verify="required">
                <option value="">婚姻状况</option>
                <option th:selected="${emp.married == '已婚'}" value="已婚">已婚</option>
                <option th:selected="${emp.married == '未婚'}" value="未婚">未婚</option>
                <option th:selected="${emp.married == '丧偶'}" value="丧偶">丧偶</option>
                <option th:selected="${emp.married == '离异'}" value="离异">离异</option>
            </select>
        </div>

        <label class="layui-form-label"><i class="layui-icon">&#xe676;</i> QQ</label>
        <div class="layui-input-inline">
            <input th:value="${emp.qqcode}" name="qqcode" placeholder="QQ号码" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">毕业学校</label>
        <div class="layui-input-inline">
            <input th:value="${emp.university}" name="university" placeholder="毕业学校" autocomplete="off" class="layui-input">
        </div>

        <label class="layui-form-label">身份证号</label>
        <div class="layui-input-inline">
            <input th:value="${emp.cardno}" autocomplete="off" name="cardno" id="identity" lay-verify="identity" placeholder="身份证" class="layui-input">
        </div>

        <label class="layui-form-label"><i class="layui-icon">&#xe678;</i> 号码</label>
        <div class="layui-input-inline">
            <input th:value="${emp.phone}" name="phone" lay-verify="phone" placeholder="手机号码" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" >
        <label class="layui-form-label">部门职位</label>
        <div class="layui-input-inline">
            <select lay-filter="selectTheme" name="fdepid" id="board" lay-verify="required">
                <option value="">上级部门</option>
                <option th:each="dep1:${fdeps}"th:value="${dep1.depid}" th:text="${dep1.depname}" th:selected="${emp.dep_id == dep1.depid || dep1.depid == fdep.depid}"></option>
            </select>
        </div>

        <div class="layui-input-inline">
            <select lay-filter="theme" id="theme" name="zdepid">
                <option value="">下级部门</option>
                <option th:each="dep2:${deps}"th:value="${dep2.depid}" th:text="${dep2.depname}" th:selected="${emp.dep_id == dep2.depid}"></option>
            </select>
        </div>

        <!--<label class="layui-form-label">职位</label>-->
        <div class="layui-input-inline">
            <select lay-filter="post" id="post" name="post_Id" lay-verify="required">
                <option value="">请选择职位</option>
                <option th:each="e:${posts}" th:value="${e.pos_Id}" th:selected="${e.pos_Id == emp.post_Id}" th:text="${e.pos_Name}">部门</option>
            </select>
        </div>

    </div>

    <div class="layui-form-item">
        <div class="layui-inline" id="area-picker">
            <label class="layui-form-label">家庭住址</label>
            <div name="city" class="layui-input-inline">
                <select id="province" th:data-value="${province}" name="province" class="province-selector" lay-filter="province-1">
                    <option value="">请选择省</option>
                </select>
            </div>
            <div name="city" class="layui-input-inline">
                <select id="city" th:data-value="${city}" name="city" class="city-selector" lay-filter="city-1">
                    <option value="">请选择市</option>
                </select>
            </div>
            <div name="city" class="layui-input-inline">
                <select id="county" th:data-value="${county}" name="county" class="county-selector" lay-filter="county-1">
                    <option value="">请选择县区</option>
                </select>
            </div>
            <div name="city" class="layui-input-inline" style="width: 209px">
                <input id="detail" th:value="${detailed}" name="detail" autocomplete="off" lay-verify="required" placeholder="详细地址" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <center>
            <button id="bt" class="layui-btn layui-btn-radius layui-btn-normal" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-radius layui-btn-warm">重新填写</button>
        </center>
    </div>
</form>
</body>
<script th:src="@{/js/register/jquery-3.1.0.min.js}"></script>
<script type="text/javascript" th:inline="none">
    layui.use(['form','laydate'], function(){
        var form = layui.form;
        var laydate=layui.laydate;

        var postid = $('#post').val();
        //获取一开始的值
        var a = $('#post').val();
        var b = $('#board').val();
        var c = $('#theme').val();

        form.on('select(theme)', function (data) {
            $('#post').val("");
            form.render();
        })
        form.on('select(post)', function (data) {//对应lay-filter="selectTheme"
            var index1 = $('#post option:selected').val();//对应id="board"
            var fdep = $('#board').val();//一级
            var dep = $('#theme').val();//二级
            if (a == 1 || a == 2){
                layer.msg('部门负责人不能随意更改职位', { icon: 5, time: 2000 });
                $('#post').val(postid);
                $('#board').val(b);//一级
                $('#theme').val(c);//二级
                form.render();
            }
            if (a!=index1 || b!=fdep || c!=dep || fdep!=0){
                $.ajax({
                    url: "/emp/postedit",//对应controller层
                    type: "post",
                    data: {
                        "id": index1,
                        "fdep":fdep,
                        "dep":dep
                    },//将选中值的value传给controller
                    datatype: "json",
                    success: function (data) {
                        if (data == 1){
                            $('#post').val("");
                            form.render();
                            layer.msg('上级部门不能选择这个职位', { icon: 5, time: 2000 });
                        }else if (data == 2){
                            $('#post').val("");
                            form.render();
                            layer.msg('同一部门已有这个职位', { icon: 5, time: 2000 });
                        }else if (data == 3){
                            $('#post').val(postid);
                            if (postid == 1 || postid==2){
                                $('#post').val("");
                            }
                            form.render();
                            layer.msg('下级部门不能选择这个职位', { icon: 5, time: 2000 });
                        }else if (data == 4){
                            $('#post').val(postid);
                            if (postid == 1 || postid==2){
                                $('#post').val("");
                            }
                            form.render();
                            layer.msg('同一部门已有这个职位', { icon: 5, time: 2000 });
                        }
                    }
                })
            }
        });

        form.on('select(selectTheme)', function (data) {//对应lay-filter="selectTheme"
            var index1 = $('#board option:selected').val();//对应id="board"  得到一级菜单选中值的value
            var optionJson = [];
            $.ajax({
                url: "/emp/selectpost",//对应controller层
                type: "post",
                data: {"id": index1},//将选中值的value传给controller
                datatype: "json",
                success: function (data) {
                    optionJson = data;
                    var selectObj = document.getElementById("theme");//对应id="theme"
                    selectObj.options.length = 0;
                    selectObj.add(new Option("下级部门",""))
                    for (var i = 0; i < data.length; i++) {
                        selectObj.add(new Option(optionJson[i].depname, optionJson[i].depid));//对应数据库中名字，两个参数是(文本,value)
                    }
                    $('#post').val("");
                    form.render();
                }
            })
        });

        //格式
        form.verify({
            // required: [/[\S]+/, "必填项不能为空"],
            phone: [/^1[3|4|5|7|8]\d{9}$/, "请输入正确的手机号"],
            email: [/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, "邮箱格式不正确"],
            // url: [/(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/, "链接格式不正确"],
            // number: function(e) {
            // 	if (!e || isNaN(e)) return "只能填写数字"
            // },
            // date: [/^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/, "日期格式不正确"],
            identity: [/(^\d{15}$)|(^\d{17}(x|X|\d)$)/, "请输入正确的身份证号"]
        })

        //常规用法
        laydate.render({
            elem: '#entry'
        });

        //监听提交
        //你可以在这里做操作  也可以不使用这个方法
        form.on('submit(formDemo)', function(data){
            $.ajax({
                url: '/emp/update',
                type: 'post',
                data:data.field,
                dataType: 'json',
                success:function(data){
                    if(data){
                        var index = parent.layer.getFrameIndex(window.name);
                        //再执行关闭
                        parent.layer.close(index);
                        window.parent.location.reload();
                    }else {
                        $("#phone").val("");
                        layer.msg('号码重复 编辑失败', { icon: 5, time: 2000 });
                    }
                },
            })
            return false;
        });

        laydate.render({
            elem: '#birthday'
            ,calendar: true
        });

        laydate.render({
            elem: '#hireday'
            ,calendar: true
        });

        //配置插件目录
        layui.config({
            base: '../layui/'
            , version: '1.0'
        });
        //一般直接写在一个js文件中
        layui.use(['layer', 'form', 'layarea'], function () {
            var layer = layui.layer
                , form = layui.form
                , layarea = layui.layarea;

            layarea.render({
                elem: '#area-picker',
                change: function (res) {
                    //选择结果
                    console.log(res);
                }
            });
        });
    });
</script>
</html>
